<template>
	<view>
		<!-- 头部搜索框 -->
		<search :placeholder="$t('homepage.ProductionPick.blanketCode')" />
		<!-- 生产单列表 -->
		<zy-group :title="$t('homepage.ProductionPick.productionList')">
			<scroll-view scroll-y="true" style="height:40vh">
				<zy-forms :model="formData" border labelWidth="180">
					<zy-form-item :label="$t('public.productionNo')+$t('public.colon')">
						<view class="formList">
							<view class="formText">{{formData.productionNo || $t('public.null')}} </view>
							<view class="formBtn">
								<zy-button type="primary" size="mini"
									@click="selectHandle">{{$t('homepage.ProductionPick.select')}}</zy-button>
							</view>
						</view>
					</zy-form-item>
					<zy-form-item :label="$t('homepage.ProductionPick.productionOrder')+$t('public.colon')"><text
							class="formText">{{formData.saleOrderNo || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.materialName')+$t('public.colon')"><text
							class="formText">{{formData.materialName || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.materialCode')+$t('public.colon')"><text
							class="formText">{{formData.materialSpec || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.clothWidth')+$t('public.colon')"><text
							class="formText">{{formData.clothWidth || $t('public.null')}}</text>
					</zy-form-item>
					<zy-form-item :label="$t('public.color')+$t('public.colon')"><text
							class="formText">{{formData.color || $t('public.null')}}</text></zy-form-item>
					<zy-form-item :label="$t('public.pattern')+$t('public.colon')"><text
							class="formText">{{formData.pattern || $t('public.null')}}</text></zy-form-item>
				</zy-forms>
			</scroll-view>
		</zy-group>
		<!-- 生产数据 -->
		<zy-group :title="$t('homepage.ProductionPick.productionData')">
			<zy-table :headList="headList" :dataList="dataList" @editInput="editInput" border></zy-table>
		</zy-group>
		<!-- 底部按钮 -->
		<bottomBtn fixed :leftText="$t('public.reset')" :rightText="$t('public.submit')" @rightBtn="submitBtn"
			@leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>

<script>
	import {
		getEntityByField,
		saveMaterialPick
	} from "@/api/homepage.js"
	export default {
		data() {
			return {
				//生产单表单字段
				formData: {
					productionNo: '',
					saleOrderNo: '',
					materialName: '',
					materialSpec: '',
					clothWidth: '',
					color: '',
					pattern: '',
				},
				//生产数据表格表头
				headList: [{
						name: this.$t('public.batchNo'),
						key: 'batchNo',
					}, {
						name: this.$t('public.packageName'),
						key: 'packageName',
					}, {
						name: this.$t('public.materialName'),
						key: 'materialName',
					}, {
						name: this.$t('public.materialSpec'),
						key: 'materialSpec',
					},
					{
						name: this.$t('public.clothWidth'),
						key: 'clothWidth',
					},
					{
						name: this.$t('public.color'),
						key: 'colour',
					},
					{
						name: this.$t('public.pattern'),
						key: 'pattern',
					},
					{
						name: this.$t('public.meters'),
						key: 'meters',
						edit: true,
						type: 'number'
					},
				],
				dataList: [], //生产数据表格数据
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(function() {
				uni.redirectTo({
					url: "/pages/HomePage/ProductionPick/index"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			//PDA扫描
			var _this = this
			uni.$on('scancodedate', function(data) {
				_this.searchList(data.code)
			})
			//生产列表选择表单
			uni.$on('formData', function(data) {
				_this.formData = data
			})
		},
		onUnload() {
			// 移除监听事件      
			uni.$off('scancodedate')
			uni.$off('formData')
		},
		methods: {
			//搜索内容查询
			searchList(e) {
				 let newData= {}
				getEntityByField({
					fieldName: 'barcode',
					fieldValue: e
				}).then((res) => {
					if (res.code == 0) {
						if (this.dataList.length == 0) {
							newData=JSON.parse(JSON.stringify(res.data).replace(/color/g,"colour"))
							this.dataList.push(newData)
						} else {
							if (this.dataList.findIndex(item => item.barcode === e) !== -1) {
								uni.showToast({
									title: "重复搜索",
									icon: "none",
									duration: 3000
								})
							} else {
								newData=JSON.parse(JSON.stringify(res.data).replace(/color/g,"colour"))
								this.dataList.push(newData)
							}
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
					uni.setStorageSync('dataList', this.dataList);
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			//生产表单选择事件
			selectHandle() {
				uni.navigateTo({
						url: "./list"
					}),
					uni.$off('scancodedate')
			},
			//编辑“生产数据”表格米数
			editInput(val) {
				let arr = uni.getStorageSync('dataList')
				if (Number(val.item.meters) > Number(arr[val.index].meters)) {
					this.dataList[val.index].meters = arr[val.index].meters
					uni.showToast({
						title: this.$t('public.max') + arr[val.index].meters,
						icon: "none",
						duration: 3000
					})
				}
			},
			// 重置事件
			resetBtn() {
				uni.redirectTo({
					url: "/pages/HomePage/ProductionPick/index"
				})
			},
			//提交事件
			submitBtn() {
				let array = JSON.parse(JSON.stringify(this.dataList).replace(/colour/g,"color"))
				console.log(array)
				saveMaterialPick({
					productionTaskId: this.formData.id,
					// dataArray: encodeURI(JSON.stringify(this.dataList)),
					dataArray: JSON.stringify(array),
				}).then((res) => {
					if (res.code == 0) {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
						this.resetBtn()
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.formList {
		display: flex;
	}

	.formText {
		color: #999;
	}

	.formBtn {
		right: 20rpx;
		position: absolute;
	}
</style>